<template>
<view>
	<view class="custom-picker">
		<view :class="{'custom-picker-mask':pickerView}" @click.stop="this.$emit("onCancel")" catchtouchmove="true"></view>
		<view class="custom-picker-content" :class="{'custom-picker-view-show':pickerView}" >
			<view class="custom-picker-cc" catchtouchmove>
				<view class="custom-picker-cancel" v-on:click.stop="this.$emit("onCancel")">取消</view>
				<view class="custom-picker-confirm" v-if="isClick" :style="'color:'+themeColor+';'" v-on:click.stop="confirmHandle">确定</view>
				<view class="custom-picker-confirm" v-else style="color:#888;">确定</view>
			</view>
			<!-- 单列 -->
			<picker-view v-if="mode==='selector' && pickerDatas.length > 0" :value="defaultValue" v-on:pickstar="pickerStarHandle" @change="pickerChangeHandle" indicator-class="custom-picker-indicator" :indicator-style="'border-top: 2px solid '+themeColor+';border-bottom: 2px solid '+themeColor+';'" class="custom-picker-view">
			    <block>
			        <picker-view-column>
			            <view class="picker-item" v-for="(item,index) in pickerDatas" :key="item.dictKey">{{item.dictValue}}</view>
			        </picker-view-column>
			    </block>
			</picker-view>
			<!-- 时间 -->
			<picker-view v-if="mode==='date' && pickerDatas !== undefined" :value="pickerDatas.defaultSelect"  v-on:change.stop="datePickerChangeHandle" @pickstart="isClick = false" @pickend="isClick = true"  indicator-class="custom-picker-indicator" :indicator-style="'border-top: 2px solid '+themeColor+';border-bottom: 2px solid '+themeColor+';'" class="custom-picker-view">
			    <block>
			        <picker-view-column>
			            <view class="picker-item" v-for="(year, index) in pickerDatas.years" :key="index">{{pickerDatas.years[index]}} 年</view>
			        </picker-view-column>
					<picker-view-column v-if="datetype === 'month' || datetype === 'day' || datetype === 'hour'">
						<view class="picker-item" v-for="(month, index) in pickerDatas.months" :key="index">{{pickerDatas.months[index]}} 月</view>
					</picker-view-column>
					<picker-view-column v-if="datetype === 'day' || datetype === 'hour'">
						<view class="picker-item" v-for="(day, index) in pickerDatas.days" :key="index">{{pickerDatas.days[index]}} 日</view>
					</picker-view-column>
					<picker-view-column v-if="datetype === 'hour'">
						<view class="picker-item" v-for="(hour, index) in pickerDatas.hours" :key="index">{{pickerDatas.hours[index]}} 时</view>
					</picker-view-column>
			    </block>
			</picker-view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
	    data() {
			return {
				pickerView: false,
				selectValueObject: undefined,
				pickerDatas: undefined,
				oldDates: undefined,
				newDates: undefined,
				currentYear: 1970,
				currentMonth: 1,
				currentDay: 1,
				currentHour: 1,
				isClick: false
			}
		},
		props:{
			mode:{
				type: String,
				default: 'selector'
			},
			themeColor:{
				type: String,
				default: ''
			},
			defaultValue:{
				type: Array,
				default: () => {
					return []
				}
			},
			datas:{
				type: Array,
				default: () => {
					return []
				}
			},
			startDate:{
				type: String,
				default: '1970-01-01'
			},
			datetype:{
				type: String,
				default: 'day'
			}
			
		},
		methods:{
			pickerChangeHandle(e){
				this.selectValueObject = e.mp.detail.value[0]
				this.$emit('onChange', e.mp.detail.value[0]);
			},
			// 日期选择
			datePickerChangeHandle(e){
				let datePickerValue = e.mp.detail.value
				this.selectValueObject = datePickerValue
				this.pickerDatas.months = datePickerValue[0] === 0 ? this.newDates.months : this.oldDates.months;
				if(datePickerValue[0] === 0 && datePickerValue[1] === 0){
					this.pickerDatas.days = this.newDates.days;
				} else{
					let pickerDatas = this.pickerDatas
					let DayOfMonth = this.getDayOfMonth(pickerDatas.years[datePickerValue[0]],pickerDatas.months[datePickerValue[1]])
					let days = []
					DayOfMonth.forEach((item, index) => days.push(++index))
					this.pickerDatas.days = days
				}
				if(datePickerValue[0] === 0 && datePickerValue[1] === 0 && datePickerValue[2] === 0){
					this.pickerDatas.hours = this.newDates.hours;
				} else{
					this.pickerDatas.hours = this.oldDates.hours;
				}
			},
			confirmHandle(event){
				this.hide()
				if(this.mode === 'selector'){
					let res = {
						index: this.selectValueObject,
						value: this.pickerDatas[this.selectValueObject]
					}
					this.$emit("onConfirm",res)
				} else if(this.mode === 'date'){
					const year = this.pickerDatas.years[this.selectValueObject[0]];
					const month = this.pickerDatas.months[this.selectValueObject[1]] || this.pickerDatas.months[this.pickerDatas.months.length-1];
					const day = this.pickerDatas.days[this.selectValueObject[2]] || this.pickerDatas.days[this.pickerDatas.days.length-1];
					const hour = this.pickerDatas.hours[this.selectValueObject[3]] || this.pickerDatas.hours[this.pickerDatas.hours.length-1];
					const value = this.selectValueObject
					if(this.datetype === 'day'){
						let res = {
							dateText: year + '年' + month + '月' + day + '日',
							date: year+ '-' + month + '-' + day,
							value
						}
					} else if(this.datetype === 'month'){
						let res = {
							dateText: year + '年' + month + '月',
							date: year+ '-' + month,
							value
						}
					} else if(this.datetype === 'hour'){
						let res = {
							dateText: year + '年' + month + '月' + day + '日' + hour + '时',
							date: year+ '-' + month + '-' + day + ' ' + hour +':00',
							value
						}	
					}
					this.$emit("onConfirm",res)
				}
			},
			init(){
				this.pickerDatas = this.datas
				if(this.mode === 'selector'){
					this.selectValueObject = this.defaultValue[0] || 0
				} else if(this.mode === 'date' || this.datas.length <= 0){
					this.pickerDatas = this.getDefaultDateData()	
				}
			},
			show(){
				this.pickerView = true
				this.isClick = false;
				this.init()
			},
			hide(){
				this.isClick = false;
				this.pickerView = false
			},
			getDefaultDateData(){
				let year = [], month=[1,2,3,4,5,6,7,8,9,10,11,12], day = [], endMonth=[], endDay=[], hour=[], endHour=[]
				let currentDate = new Date()
				let currentYear = currentDate.getFullYear()
				let currentMonth = currentDate.getMonth() + 1
				let currentDay = currentDate.getDate()
				let currentHour = currentDate.getHours()
				this.currentYear = currentYear
				this.currentMonth = currentMonth
				this.currentDay = currentDay
				this.currentHour = currentHour
				let DayOfMonth = 31
				let startYear = this.getStartYear(), endYear = startYear + 10
				while(startYear <= endYear){
					year.push(startYear++)
				}
				DayOfMonth = this.getDayOfMonth(year[(year.length -1)],currentMonth)
				DayOfMonth.forEach((item, index) => day.push(++index))
				for(let startHour = 0; startHour < 24;){
					hour.push(startHour > 9 ? startHour++ : '0' + startHour++)
				}
				let oldDateData = {
					years: year,
					months: month,
					days: day,
					hours: hour
				}
				this.oldDates = oldDateData	
				let newMonth = currentMonth
				while(newMonth <= 12){
					endMonth.push(newMonth++)
				}
				let newDay = currentDay
				DayOfMonth = this.getDayOfMonth(currentYear, currentMonth)
				while(newDay <= DayOfMonth){
					endDay.push(newDay++)
				}
				for(let newHour = currentHour; newHour < 24;){
					endHour.push(newHour > 9 ? newHour++ : '0' + newHour++)
				}
				let newDateData = {
					years: year,
					months: endMonth,
					days: endDay,
					hours: endHour
				}
				this.newDates = newDateData
				let defaultDateData = {
					years: year,
					months: endMonth,
					days: endDay,
					hours: endHour,
					defaultSelect: [0, 0, 0, 0]
				}
				if(typeof this.selectValueObject === undefined){
					this.selectValueObject = defaultDateData.defaultSelect
				} else{
					let thisYear = year;
					let thisMonth = [];
					let thisDay = [];
					let thisHour = [];
					if(this.selectValueObject[0] === 0){
						thisMonth = endMonth;
					} else{
						thisMonth = month;
					}
					if(this.selectValueObject[0] === 0 && this.selectValueObject[1] === 0){
						thisDay = endDay;
					} else{
						let DayOfMonth = 31
						DayOfMonth = this.getDayOfMonth(year[this.selectValueObject[0]], this.selectValueObject[1] + this.currentMonth)
						DayOfMonth.forEach((item, index) => thisDay.push(++index))
					}
					if(this.selectValueObject[0] == 0 && this.selectValueObject[1] == 0 && this.selectValueObject[2] == 0){
						thisHour = endHour;
					} else{	
						for(let _hour = 0 ; _hour < 24;){
							thisHour.push(_hour > 9 ? _hour++ : '0' + _hour++)
						}
					}
					defaultDateData = {
						years: thisYear,
						months: thisMonth,
						days: thisDay,
						hours: thisHour,
						defaultSelect: this.selectValueObject
					}
				}
				return defaultDateData;
			},
			getStartYear(){
				let startDate = new Date()
				let startYear = startDate.getFullYear()
				return startYear
			},
			isLeapYear(year){
				if ((year % 100 == 0 && year % 400 == 0) || (year % 100 != 0 && year % 4==0)){
					return true;
				}
				return false;
			},
			getDayOfMonth(year, month){
				switch (month){
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12:
						return 31
					case 4:
					case 6:
					case 9:
					case 11:
						return 30
					case 2:
						if (this.isLeapYear(year)){
							return 29
						} else{
							return 28
						}
				}
			}
		}
	}
</script>

<style>
	.custom-picker-mask {
	    position: fixed;
	    z-index: 1000;
	    top: 0;
	    right: 0;
	    left: 0;
	    bottom: 0;
	    background: rgba(0, 0, 0, 0.6);
	}
	.custom-picker-content{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}
	.custom-picker-cc{
		/* display: flex; */
		padding: 18rpx 30rpx;
		background-color: #fff;
		position: relative;
		/* text-align: center; */
		font-size: 32rpx;
	}
	.custom-picker-cancel,.custom-picker-confirm{
		display: inline-block;
		font-size:32rpx;
		padding:10rpx 20rpx; 
		position:relative
	}
	.custom-picker-cancel{
		text-align: left;
		color: #888;
	}
	.custom-picker-confirm{
		text-align: right;
		float:right
	}
	.custom-picker-view-show {
	    transform: translateY(0); 
	}
	.custom-picker-view {
	    position: relative;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 476rpx;
	    background-color: rgba(255, 255, 255, 1);
	}
	.picker-item {
	    text-align: center;
	    line-height: 80rpx;
	    font-size: 32rpx;
	}
	
	.custom-picker-indicator{
		height:80rpx;
		width: 200rpx;
		margin-left:calc(50% - 100rpx);
	}
</style>
